<template>
  <div class="login">
    <img src="../../assets/img/beijing.png" alt />
    <!-- <img src="../../assets/img/beijing.png" alt /> -->
    <div class="bg"></div>
    <div class="content">
      <div class="content-center">
        <div class="title">
          <img src="../../assets/img/logo.png" alt />
          <div>
            <span>登录</span>
            <span>|</span>
            <span>注册</span>
          </div>
        </div>
        <div class="input">
          <div class="input-type">
            <img src="../../assets/img/yonghu.png" alt />
            <input type="text" placeholder="使用邮箱/电话/用户名登录" />
          </div>
          <div class="input-type">
            <img src="../../assets/img/mima.png" alt />
            <input type="text" placeholder="使用邮箱/电话/用户名登录" />
          </div>  
        </div>
        <div style="text-align:center">
          <el-button @click.native="login" style="width:150px" type="warning">登录</el-button>
        </div>
      </div>
      <div class="lunbo">
        <img src="../../assets/img/tu01.png" alt="">
        <img src="../../assets/img/tu02.png" alt="">
        <img src="../../assets/img/tu03.png" alt="">
        <img src="../../assets/img/tu01.png" alt="">
        <img src="../../assets/img/tu02.png" alt="">
        <img src="../../assets/img/tu03.png" alt="">
        <img src="../../assets/img/tu01.png" alt="">
        <img src="../../assets/img/tu02.png" alt="">
        <img src="../../assets/img/tu03.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {};
  },
  created() {
    
  },
  mounted() {},
  methods: {
    login() {
      var token = 123456;
      this.$store.commit("getToken", token);
      this.$router.push({path:"/game"})
    }
  }
};
</script>
<style lang='less' scope>
.login {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  > img {
    width: 100%;
    height: 100%;
    animation: 60s rowup linear infinite normal;
    display: block;
    
  }
  > .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
  }
  > .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    > .content-center {
      margin: 20vh auto 100px;
      max-width: 700px;
      > .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ffffff;
        font-size: 16px;
        > div {
          > span:nth-child(2) {
            margin: 0 20px;
          }
        }
      }
      > .input {
        margin: 50px 0 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          width: 330px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          background-color: rgba(255, 255, 255, 0.6);
          padding: 5px 10px;
          border-radius: 8px;
          > input {
            background-color: rgba(255, 255, 255, 0);
            outline: none;
            border: 0;
            margin-left: 20px;
            color: #fff;
          }
          > input::-webkit-input-placeholder {
            color: #fff;
          }
        }
      }
      >div:last-child{
        .el-button--warning{
          background-image: linear-gradient(#FBE0B8 , #CFA66E);
          border-color: #FBE0B8;
        }
      }
    }
    >.lunbo{
      display: flex;
      justify-content: space-around;
      align-items: center;
      animation: 120s leftToRight linear infinite normal;
      >img:nth-child(2n){
        margin: 0 10px;
        width: 50%;
      }
    }
  }
}

// @keyframes rowup {
//   0% {
//     -webkit-transform: translate3d(0, 0, 0);
//     transform: translate3d(0, 0, 0);
//   }
//   100% {
//     -webkit-transform: translate3d(0, -100vh, 0);
//     transform: translate3d(0, -100vh, 0);
//     display: none;
//   }
// }
@keyframes rowup {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25%{
    -webkit-transform:translateY(-120px) scale(1.5);
    transform: translateY(-120px) scale(1.5);
  }
  50%{
    -webkit-transform:translateY(-100px) scale(1.3);
    transform: translateY(-100px) scale(1.3);
  }
  75%{
    -webkit-transform:translateY(100px) scale(1.1);
    transform: translateY(100px) scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    display: none;
  }
}
@keyframes leftToRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    display: none;
  }
}
</style>